import React, { Component } from 'react';

class Header extends Component {
	constructor() {
		super();
		this.state = {
			value: '',
		};
	}

	handleChange = e => {
		this.setState({
			value: e.target.value,
		});
	};

	handleKeyUp = e => {
		const { value } = this.state;
		if (e.keyCode === 13 && value) {
			this.props.addItem(value);

			this.setState({ value: '' });
		}
	};

	render() {
		const { value } = this.state;
		return (
			<div>
				<h3>todo header</h3>
				<input value={value} type="text" data-test="input" onChange={this.handleChange} onKeyUp={this.handleKeyUp} />
			</div>
		);
	}
}

export default Header;
